<template>
  <div class="title">
    <h1>填充</h1>
    <span>{type: fill}</span>
  </div>
  <div class="container">
    <template v-for="(item, index) in weather" :key="index">
      <v-mini-weather class="v-weather">
        <template #default>
          <v-mini-weather-icon :icon="item.icon" class="v-weather-icon"></v-mini-weather-icon>
          <span>{{item.weather}}</span>
        </template>
      </v-mini-weather>
    </template>
  </div>
  <div class="title">
    <h1>描边</h1>
    <span>{type: line}</span>
  </div>
  <div class="container">
    <template v-for="(item, index) in weather" :key="index">
      <v-mini-weather class="v-weather">
        <template #default>
          <v-mini-weather-icon :icon="item.icon" type="line" class="v-weather-icon"></v-mini-weather-icon>
          <span>{{item.weather}}</span>
        </template>
      </v-mini-weather>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import vMiniWeather from './lib/vMiniWeather.vue'
import vMiniWeatherIcon from './lib/vMiniWeatherIcon/vMiniWeatherIcon.vue'

const weather = ref([
  {
    weather: '晴',
    icon: 'd00'
  },
  {
    weather: '晴',
    icon: 'n00'
  },
  {
    weather: '多云',
    icon: 'd01'
  },
  {
    weather: '多云',
    icon: 'n01'
  },
  {
    weather: '阴天',
    icon: '02'
  },
  {
    weather: '阵雨',
    icon: '03'
  },
  {
    weather: '雷阵雨',
    icon: '04'
  },
  {
    weather: '雷阵雨伴有冰雹',
    icon: '05'
  },
  {
    weather: '雨夹雪',
    icon: '06'
  },
  {
    weather: '小雨',
    icon: '07'
  },
  {
    weather: '中雨',
    icon: '08'
  },
  {
    weather: '大雨',
    icon: '09'
  },
  {
    weather: '暴雨',
    icon: '10'
  },
  {
    weather: '大暴雨',
    icon: '11'
  },
  {
    weather: '特大暴雨',
    icon: '12'
  },
  {
    weather: '阵雪',
    icon: '13'
  },
  {
    weather: '小雪',
    icon: '14'
  },
  {
    weather: '中雪',
    icon: '15'
  },
  {
    weather: '大雪',
    icon: '16'
  },
  {
    weather: '暴雪',
    icon: '17'
  },
  {
    weather: '雾',
    icon: '18'
  },
  {
    weather: '冻雨',
    icon: '19'
  },
  {
    weather: '沙尘暴',
    icon: '20'
  },
  {
    weather: '小到中雨',
    icon: '21'
  },
  {
    weather: '中到大雨',
    icon: '22'
  },
  {
    weather: '大到暴雨',
    icon: '23'
  },
  {
    weather: '暴雨到大暴雨',
    icon: '24'
  },
  {
    weather: '大暴雨到特大暴雨',
    icon: '25'
  },
  {
    weather: '小到中雪',
    icon: '26'
  },
  {
    weather: '中到大雪',
    icon: '27'
  },
  {
    weather: '大到暴雪',
    icon: '28'
  },
  {
    weather: '浮尘',
    icon: '29'
  },
  {
    weather: '扬沙',
    icon: '30'
  },
  {
    weather: '强沙尘暴',
    icon: '31'
  },
  {
    weather: '霾',
    icon: '53'
  },
  {
    weather: '无',
    icon: '99'
  },
  {
    weather: '浓雾',
    icon: '32'
  },
  {
    weather: '强浓雾',
    icon: '49'
  },
  {
    weather: '中度霾',
    icon: '54'
  },
  {
    weather: '重度霾',
    icon: '55'
  },
  {
    weather: '严重霾',
    icon: '56'
  },
  {
    weather: '大雾',
    icon: '57'
  },
  {
    weather: '特强浓雾',
    icon: '58'
  },
  {
    weather: '雨',
    icon: 'd301'
  },
  {
    weather: '雪',
    icon: 'd302'
  }
])

</script>

<style>
* {
  padding: 0;
  margin: 0;
}
#app {
  max-width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  background-image: linear-gradient(#6dd5ed, #2193b0);
  padding: 0 20px;
}
.title {
  margin: 20px 0;
  color: #fff;
  text-align: center;
}
.title h1 {
  font-size: 50px;
}
.title span {
  font-size: 26px;
}
.container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  justify-content: center;
  place-items: center center;
  grid-gap: 20px;
  margin-bottom: 40px;
}
.v-weather {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  padding: 6px 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.v-weather-icon {
  width: 80px;
  height: 80px;
}
.v-weather span {
  color: #333;
}
</style>
